import React from 'react'
import { Icon, Badge, Dropdown, Menu, Modal, message } from 'antd'
import screenfull from 'screenfull'
import { inject, observer } from 'mobx-react'
import { Link, withRouter } from 'react-router-dom'
import { isAuthenticated } from '../../utils/Session'
import API from '../../axios/api'
import {FormModal} from "../../components/ModalForm";

//withRouter一定要写在前面，不然路由变化不会反映到props中去
@withRouter @inject('appStore') @observer
class HeaderBar extends React.Component {
  state = {
    icon: 'arrows-alt',
    count: 100,
    visible: false,
    avatar: require('./img/04.jpg'),
    modalShow:false
  }

  componentDidMount () {
    screenfull.onchange(() => {
      this.setState({
        icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
      })
    })
  }

  componentWillUnmount () {
    screenfull.off('change')
  }

  toggle = () => {
    this.props.onToggle()
  }
  screenfullToggle = () => {
    if (screenfull.enabled) {
      screenfull.toggle()
    }
  }
  logout = () => {
    this.props.appStore.toggleLogin(false)
    this.props.history.push(this.props.location.pathname)
  }

    updatePwd = ()=>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        if(param.NewPassword === param.NewPasswords){
            API.updatePassword(param).then(res =>{
                if(res.Code === 200)
                {
                    message.success('修改成功，请重新登录...')
                    this.props.appStore.toggleLogin(false)
                    this.props.history.push('/login')
                }
                else message.error(res.Message)
            })
        }
        else{
            message.success('密码输入不一致，请重新输入')
        }
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    fields = () => {
        return [
            { label: '旧密码', type: 'password', name: 'Password',
                options: {
                    rules: [
                        { required: true, message: '必填!',}
                    ]
                }
            },
            { label: '新密码', type: 'password', name: 'NewPassword',
                options: {
                    rules: [
                        { required: true, message: '必填!',}
                    ]
                }
            },
            { label: '确认密码', type: 'password', name: 'NewPasswords',
                options: {
                    rules: [
                        { required: true, message: '必填!',}
                    ]
                }
            },
        ]
    }

  render () {
    const {icon, count, visible, avatar} = this.state
    const {appStore, collapsed, location} = this.props
    const user = appStore.user
    const notLogin = (
      <div>
          <span>{user ? user.LoginName: 'admin'}</span>
      </div>
    )
    const menu = (
      <Menu className='menu'>
        <Menu.ItemGroup className='menu-group'>
          <Menu.Item onClick={this.updatePwd}>修改密码</Menu.Item>
          <Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
        </Menu.ItemGroup>
      </Menu>
    )
    const login = (
      <Dropdown overlay={menu}>
          <span>{user ? user.LoginName: 'admin'}</span>
      </Dropdown>
    )
    return (
      <div id='headerbar'>
        <div style={{lineHeight: '64px', float: 'right'}}>
          <ul className='header-ul'>
            <li><Icon type={icon} onClick={this.screenfullToggle}/></li>
            <li>
              {appStore.isLogin ? login : notLogin}
            </li>
          </ul>
        </div>
        <Modal
          footer={null} closable={false}
          visible={visible}
          wrapClassName="vertical-center-modal"
          onCancel={() => this.setState({visible: false})}>
          <img src={avatar} alt="" width='100%'/>
        </Modal>
          <FormModal
              modalKey="edit"
              visible={this.state.modalShow}
              title="修改密码"
              fields={this.fields()}
              onOk={this.onOk}
              onCancel={this.onCancel}
              okText="保存"
          />
      </div>
    )
  }
}

export default HeaderBar
